<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>零件分析</title>
<%
	String sid = request.getParameter("secondMenuId");
	request.getSession().setAttribute("secondMenuId", sid);
%>
<%@include file="/jsp/include/common.jsp"%>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/assets/ui/jquery-easyui-1.4.1/extend/tree.loadFilter.js"></script>
</head>
<body class="easyui-layout">
	<%@include file="/jsp/include/commonLayout.jsp"%>
	<div data-options="region:'center'">
		<div class="easyui-layout" data-options="fit:true">
			<div data-options="region:'west'" style="width: 200px">
				<div title="快速查找" data-options="iconCls:'icon-search',collapsed:false,collapsible:false" style="padding: 10px;">
					<input class="easyui-searchbox" prompt="查找" style="width: 100%; height: 30px;">
				</div>
				<ul id="partTree" class="easyui-tree">
				</ul>
			</div>
			<div data-options="region:'center'">
				<div id="tabs" class="easyui-tabs"
					style="width: 100%; height: 540px;">
					<div title="基本信息对比" style="padding: 20px;">
						<div>
							<div class="wrap">
								<div class="auto-sina-results">
									<div class="results-item">
										<table class="item-table" cellpadding="0" cellspacing="0">
											<tbody>
												<tr class="">
													<th class="table-options">
														<div  style="width:150px;">
															<p>本系统数据仅提供参考，</p>
															<p>购车时请以实车为准。</p>
															<p style="margin-top: 5px;">● 标准配置</p>
															<p>○ 可选配置</p>
															<p>__ 无</p>
														</div>
													</th>
													<th class="table-cars"><img src="<%=request.getContextPath()%>/assets/img/a6l.jpg" height="87" width="136">
														<div>
															<p>
																<a title="奥迪A6L" target="_blank" href="">奥迪A6L</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
																<a class="easyui-linkbutton" iconCls="icon-reload">换车</a>
															</p>
															<p>
																<a href="" title="2014款 2.0L TFSI手动 基本型" target="_blank">2014款
																	2.0L TFSI手动 基本型</a>
															</p>
															<p>
																售价：<span class="red">57</span>万
															</p>
														</div></th>
													<th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
													</th>
													<th class="table-cars"><img
														src="<%=request.getContextPath()%>/assets/img/a6l.jpg" height="87" width="136">
														<div>
															<p>
																<a title="奥迪A6L" target="_blank" href="">奥迪A6L</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
																<a class="easyui-linkbutton" iconCls="icon-reload">换车</a>
															</p>
															<p class="item-info-mod">
																<a href="" title="2014款 2.5L 30FSI手自一体技术型"
																	target="_blank">2014款 2.5L 30FSI手自一体技术型</a>
															</p>
															<p>
																售价：<span class="red">80</span>万
															</p>
														</div></th>
													<th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
													</th>
													<th class="table-cars"><img
														src="<%=request.getContextPath()%>/assets/img/a4.jpg"
														height="87" width="136">
														<div>
															<p class="item-info-brand">
																<a title="奥迪A3" target="_blank" href="">奥迪A3</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
																<a class="easyui-linkbutton" iconCls="icon-reload">换车</a>
															</p>
															<p class="item-info-mod">
																<a href="" title="2014款 Sportback 35TFSI进取型" target="_blank">2014款 Sportback 35TFSI进取型</a>
															</p>
															<p>
																售价：<span class="red">20</span>万
															</p>
														</div></th>
													<th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
													</th>
													<th>
														<div id="select-3-2" class="select">
															品牌<select id="cc" class="easyui-combobox" name="dept" style="width: 150px;">
																<option></option>
																<option>奥迪</option>
																<option>宝马</option>

															</select>
														</div>
														<div id="select-3-2" class="select">
															车型<select id="cc" class="easyui-combobox" name="dept" style="width: 150px;">
																<option></option>
																<option>奥迪A6L</option>
																<option>奥迪A3</option>
																<option>奥迪A8L</option>
																<option>宝马X6</option>
																<option>宝马X3</option>
															</select>
														</div>

														<div id="select-3-3" class="select">
															配置<select id="cc" class="easyui-combobox" name="dept" style="width: 150px;">
																<option></option>
																<option>旗舰</option>
																<option>舒适</option>
																<option>运动</option>
																<option>标准</option>
																<option>基本</option>
															</select>
														</div>
														<div id="option-3-3" class="opt-cars"
															style="display: none;"></div>
														</div>
														<div class="btn-addcar" onclick="addCars(3)"></div>
														</div>
													</th>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
							</div>
						</div>
						<div>
							<table id="dataGrid" style=""></table>
						</div>

					</div>
					<div title="图片对比" style="overflow: auto; padding: 20px;"></div>

				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	$(document).ready(
		function() {
			// 添加验证(远程验证)
			$("#userid1").textbox(
							{
								required : true, //定义为必填字段
								validType : 'remote["'
										+ getRootPath()
										+ '/UserinfoController/findUserById.do","userid"]', //定义字段验证类型
								invalidMessage : '用户名已存在', //当文本框的内容被验证为无效时出现的提示
								delay : 1000
							//延迟到最后验证输入值
							});
			$("#email1").textbox({
				required : true,
				validType : "email"
			});
			var dataGrid = $('#dataGrider').datagrid(
					{
						rownumbers : true, //如果为true，则显示一个行号列
						fitColumns : true, //真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动
						collapsible : true, //定义是否显示可折叠按钮
						title : '基本参数', //在面板头部显示的标题文本
						method : 'post', //该方法类型请求远程数据
						url : getRootPath()
								+ '/template/json/partofcar.json', //一个URL从远程站点请求数据
						singleSelect : false,//只能选一行
						striped : true, //数据条纹显示
						columns : [ [ {
							field : 'userid',
							title : '车型',
							width : 200,
							align : 'right'
						}, {
							field : 'email',
							title : '奥迪A6L旗舰版',
							width : 200,
							align : 'center'
						}, {
							field : 'phone',
							title : '奥迪A6L手自一体技术型',
							width : 200,
							align : 'center'
						}, {
							field : 'odesc',
							title : '奥迪A3',
							width : 200,
							align : 'center'
						}, {
							field : 'oid',
							title : '',
							width : 200,
							align : 'center'
						} ] ],
						sortName : 'userid', //定义哪些列可以进行排序
						remoteFilter : true, //设置为true时，启用远程过滤
						filterDelay : 1000, //延迟过滤 'text' 过滤器组件中最后一次键盘输入事件
						filterStringify : function(data) { //字符串化过滤器规则的函数
							return JSON.stringify(data);
						}
					});
			// 初始化表格
			var dataGrid = $('#dataGrid')
					.datagrid(
							{
								rownumbers : true, //如果为true，则显示一个行号列
								fitColumns : true, //真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动
								collapsible : true, //定义是否显示可折叠按钮
								title : '零件对比', //在面板头部显示的标题文本
								method : 'post', //该方法类型请求远程数据
								url : getRootPath()
										+ '/template/json/partcomparative3.json', //一个URL从远程站点请求数据
								singleSelect : false,//只能选一行
								striped : true, //数据条纹显示
								columns : [ [ {
									field : 'userid',
									title : '零件名称',
									width : 100,
									align : 'right'
								}, {
									field : 'email',
									title : '螺栓',
									width : 200,
									align : 'center'
								}, {
									field : 'phone',
									title : '螺栓',
									width : 200, //如果为true，则允许列使用排序
									align : 'center'
								}, {
									field : 'odesc',
									title : '螺栓',
									width : 200, //如果为true，则允许列使用排序
									align : 'center'
								}, {
									field : 'oid',
									title : '',
									width : 200, //如果为true，则允许列使用排序
									align : 'center'
								} ] ],
								sortName : 'userid', //定义哪些列可以进行排序
								remoteFilter : true, //设置为true时，启用远程过滤
								filterDelay : 1000, //延迟过滤 'text' 过滤器组件中最后一次键盘输入事件
								filterStringify : function(data) { //字符串化过滤器规则的函数
									return JSON.stringify(data);
								}
							});

					});
	function back() {
		window.location.href = getRootPath()
				+ '/template/dataManage/part/partList.jsp';
	}
	$('#partTree').tree({
		url : getRootPath() + '/template/json/treeDemo.json',
		//checkboxs: true,
		parentField : "pid",
		textFiled : "name",
		idFiled : "id"

	});
</script>
</html>
